<template>
    <div style="height: 100%;">
        <iframe class="herlist" v-if="show"
                id="iframeId" :src="url" frameborder="0" scrolling="auto">
        </iframe>
    </div>
</template>

<script>
    import {Util,TokenUtil} from "@lowcode/jpaas-common-lib"

    export default {
        name: "UrlView",
        props: {
            showUrl: {
                type: String
            },
            pk: {
                type: String
            },
            urlParamData: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                url: '',
                show: false
            }
        },
        created() {
            this.initView();
        },
        methods: {
            //外部URL表单提交前的校验
            valid() {
                var child = document.getElementById("iframeId").contentWindow;
                return child.valid();
            },
            //外部URL表单提交前的获取表单数据
            getData() {
                var child = document.getElementById("iframeId").contentWindow;
                return child.getData();
            },
            setUrl(valUrl) {
                this.url = valUrl;
                this.initToken();
            },
            initView() {
                this.show = true;
                if (this.$route.meta.params) {
                    this.url = this.$route.meta.params;
                    this.initToken();
                } else if (this.showUrl) {
                    this.url = this.showUrl;
                    this.initToken();
                } else if (this.url) {
                    this.initToken();
                }
            },
            initToken() {
                let token = TokenUtil.getToken();
                if (token) {
                    if (!Util.getKey('loginUser')) {
                        Util.setKeyVal('TOKEN', token);
                        Util.setKeyVal('TOKEN_EXPIRE', token);
                    }
                }
                this.spliceUrl("authorization", token);
                this.spliceUrl("pk", this.pk);
                if(this.urlParamData && this.urlParamData.length>0){
                    this.spliceUrlParamData();
                }
            },
            spliceUrlParamData(){
                for(let i=0;i<this.urlParamData.length;i++){
                    let param=this.urlParamData[i];
                    this.spliceUrl(param.paramKey,param.paramKeyVal);
                }
            },
            spliceUrl(key, val) {
                if (!val) {
                    return;
                }
                if (this.url.indexOf("?") == -1) {
                    this.url += "?" + key + "=" + val;
                } else {
                    this.url += "&" + key + "=" + val;
                }
            },
        },
        watch: {
            '$route': {
                handler: function (val, old) {
                    this.show = false;
                    this.$nextTick(() => {
                        this.initView();
                    })
                }
            },
            deep: true
        }
    }
</script>

<style>
    .herlist {
        height: calc(100vh - 120px);
        width: 100%;
    }
</style>
